<template>
  <div>
    <v-stepper v-model="e1">
      <v-stepper-header>
        <template v-for="n in steps">
          <v-stepper-step
            :key="`${n}-step`"
            :complete="e1 > n"
            :step="n"
            editable
          >
            {{ step_titles[n] }}
          </v-stepper-step>

          <v-divider
            v-if="n !== steps"
            :key="n"
          ></v-divider>
        </template>
      </v-stepper-header>

      <v-stepper-items>
        <v-stepper-content
          step="1"
        >
          <v-card>
              <v-card-title>
                  <div style="height: 40px">
                    <v-row dense>
                        <v-col cols="6"><div class="div-index"><h4>输入测试场景名称：</h4></div></v-col>
                        <v-col cols="6">
                            <v-text-field
                              v-model="sheet.scene_name"
                              dense
                              outlined
                              hide-details
                              style="margin-top: 6px"
                            ></v-text-field>
                        </v-col>
                    </v-row>
                  </div>
              </v-card-title>

          <v-simple-table
            height="330px"
          >
            <template v-slot:default>
                <thead style="width: 50%">
                    <tr class="table-head-row">
                        <div class="table-head">
                            <v-row no-gutters>
                                <v-col cols="1">
                                    <h4>序号</h4>
                                </v-col>
                                <v-col cols="3">
                                    <h4>因子名称</h4>
                                </v-col>
                                <v-col cols="2">
                                    <h4>操作</h4>
                                </v-col>
                            </v-row>
                        </div>
                    </tr>
                </thead>
                <tbody>
                    <tr
                      v-for="(item, i) in sheet.FirstItem"
                      :key="item"
                      :index="i"
                      class="table-body-row"
                    >
                        <div class="table-body">
                            <v-row no-gutters>
                                <v-col cols="1">
                                    <div class="div-index"><h4>{{i+1}}</h4></div>
                                </v-col>
                                <v-col cols="3">
                                    <v-text-field
                                      v-model="item.name"
                                      dense
                                      placeholder="因子名称"
                                      outlined
                                      hide-details
                                    ></v-text-field>
                                </v-col>
                                <v-col cols="2">
                                    <div class="div-index">
                                        <v-btn small icon @click="removeFirst(i)">
                                            <v-icon>mdi-minus</v-icon>
                                        </v-btn>
                                        <v-btn small icon @click="appendFirst(i+1)">
                                            <v-icon>mdi-plus</v-icon>
                                        </v-btn>
                                    </div>
                                </v-col>
                            </v-row>
                        </div>
                    </tr>
                </tbody>
            </template>
          </v-simple-table>

              <v-btn
                text
                color="primary"
                @click="nextStep(1)"
              >
                下一步
              </v-btn>

              <v-btn
                color="primary"
                @click="submitFirst"
              >
                提交
              </v-btn>
              <v-btn text color="green">{{ FirstTip }}</v-btn>
          </v-card>
        </v-stepper-content>

        <v-stepper-content
          step="2"
        >
          <v-simple-table
            height="400px"
          >
            <template v-slot:default>
              <thead style="width: 50%">
                <tr class="table-head-row">
                    <div class="table-head">
                        <v-row no-gutters>
                            <v-col cols="1">
                                <h4>序号</h4>
                            </v-col>
                            <v-col cols="2">
                                <h4>因子名称</h4>
                            </v-col>
                            <v-col cols="3">
                                <h4>因子取值|水平名称</h4>
                            </v-col>
                            <v-col cols="2">
                                <h4>取值权重</h4>
                            </v-col>
                            <v-col cols="2">
                                <h4>操作</h4>
                            </v-col>
                        </v-row>
                    </div>
                </tr>
              </thead>
              <tbody>
                <tr
                  v-for="(item, i) in sheet.SecondItem"
                  :key="item"
                  :index="i"
                  class="table-body-row"
                >
                    <div class="table-body">
                      <v-row no-gutters>
                        <v-col cols="1">
                            <div class="div-index"><h4>{{i+1}}</h4></div>
                        </v-col>
                        <v-col cols="2">
                            <v-text-field
                              v-model="item.name"
                              dense
                              outlined
                              disabled
                              hide-details
                            ></v-text-field>
                        </v-col>
                        <v-col cols="3">
                            <v-text-field
                              v-model="item.value"
                              dense
                              placeholder="因子取值"
                              outlined
                              hide-details
                            ></v-text-field>
                        </v-col>
                        <v-col cols="2">
                            <v-text-field
                              v-model="item.weight"
                              dense
                              placeholder="取值权重"
                              outlined
                              hide-details
                            ></v-text-field>
                        </v-col>
                        <v-col cols="2">
                            <div class="div-index">
                                <v-btn small icon @click="removeSecond(i)">
                                    <v-icon>mdi-minus</v-icon>
                                </v-btn>
                                <v-btn small icon @click="appendSecond(i+1, item.name)">
                                    <v-icon>mdi-plus</v-icon>
                                </v-btn>
                            </div>
                        </v-col>
                      </v-row>
                    </div>
                </tr>
              </tbody>
            </template>
          </v-simple-table>

          <v-btn
            text
            color="primary"
            @click="nextStep(0)"
          >
            上一步
          </v-btn>
          <v-btn
            text
            color="primary"
            @click="nextStep(2)"
          >
            下一步
          </v-btn>
          <v-btn
            color="primary"
            @click="submitFirst"
            samll
          >
            重置
          </v-btn>
          <v-btn text color="green">{{ SecondTip }}</v-btn>
        </v-stepper-content>

        <v-stepper-content
          step="3"
        >
          <v-simple-table
            height="400px"
          >
            <template v-slot:default>
                <thead style="width: 50%">
                    <tr class="table-head-row">
                        <div class="table-head">
                            <v-row no-gutters>
                                <v-col cols="1">
                                    <h4>序号</h4>
                                </v-col>
                                <v-col cols="5">
                                    <h4>选择子模型</h4>
                                </v-col>
                                <v-col cols="2">
                                    <h4>设置阶数</h4>
                                </v-col>
                                <v-col cols="2">
                                    <h4>操作</h4>
                                </v-col>
                            </v-row>
                        </div>
                    </tr>
                </thead>
                <tbody>
                    <tr
                      v-for="(item, i) in sheet.ThirdItem"
                      :key="item"
                      :index="i"
                      class="table-body-row"
                    >
                        <div class="table-body">
                            <v-row no-gutters>
                                <v-col cols="1">
                                    <div class="div-index"><h4>{{i+1}}</h4></div>
                                </v-col>
                                <v-col cols="5">
                                    <v-combobox
                                      v-model="item.model"
                                      :items="TempName"
                                      @change="modelLength(item.model)"
                                      hide-selected
                                      label="选择子模型"
                                      multiple
                                      clearable
                                      persistent-hint
                                      small-chips
                                      outlined
                                      dense
                                      hide-details
                                    >
                                      <template v-slot:no-data>
                                        <v-list-item>
                                          <v-list-item-content>
                                            <v-list-item-title>
                                              需要先添加因子并提交数据
                                            </v-list-item-title>
                                          </v-list-item-content>
                                        </v-list-item>
                                      </template>
                                    </v-combobox>
                                </v-col>
                                <v-col cols="2">
                                    <v-combobox
                                      v-model="item.order"
                                      :items="orderList"
                                      outlined
                                      dense
                                    ></v-combobox>
                                </v-col>
                                <v-col cols="2">
                                    <div class="div-index">
                                        <v-btn small icon @click="removeThird(i)">
                                            <v-icon>mdi-minus</v-icon>
                                        </v-btn>
                                        <v-btn small icon @click="appendThird(i+1)">
                                            <v-icon>mdi-plus</v-icon>
                                        </v-btn>
                                    </div>
                                </v-col>
                            </v-row>
                        </div>
                    </tr>
                </tbody>
            </template>
          </v-simple-table>

          <v-btn
            text
            color="primary"
            @click="nextStep(1)"
          >
            上一步
          </v-btn>
          <v-btn
            text
            color="primary"
            @click="nextStep(3)"
          >
            下一步
          </v-btn>
          <v-btn
            color="primary"
            @click="submitSecond"
            samll
          >
            重置
          </v-btn>
          <v-btn text color="green">{{  ThirdTip }}</v-btn>
        </v-stepper-content>

        <v-stepper-content
          step="4"
        >
          <v-simple-table
            height="400px"
          >
            <template v-slot:default>
                <thead style="width: 50%">
                    <tr class="table-head-row">
                        <div class="table-head">
                            <v-row no-gutters>
                                <v-col cols="1">
                                    <h4>别称</h4>
                                </v-col>
                                <v-col cols="1">
                                    <h4>条件</h4>
                                </v-col>
                                <v-col cols="2">
                                    <h4>名称</h4>
                                </v-col>
                                <v-col cols="2">
                                    <h4>符号</h4>
                                </v-col>
                                <v-col cols="4">
                                    <h4>取值范围</h4>
                                </v-col>
                                <v-col cols="1">
                                <h4>操作</h4>
                            </v-col>
                            </v-row>
                        </div>
                    </tr>
                </thead>
                <tbody>
                    <tr
                      v-for="(item, i) in sheet.FourthItem"
                      :key="item"
                      :index="i"
                    >
                        <div class="table-body">
                            <v-row no-gutters class="row-if">
                                <v-col cols="1">
                                    <div class="div-index"><h4>{{ item.index }}</h4></div>
                                </v-col>
                                <v-col cols="1">
                                    <div class="div-index"><h4>IF</h4></div>
                                </v-col>
                                <v-col cols="2">
                                    <v-combobox
                                      v-model="item.if_name"
                                      :items="TempName"
                                      @change="changeName(item.if_name)"
                                      outlined
                                      dense
                                    >
                                    </v-combobox>
                                </v-col>
                                <v-col cols="2">
                                    <v-combobox
                                      v-model="item.if_cond"
                                      :items="conditionList"
                                      @change="changeCondition(item.if_cond)"
                                      outlined
                                      dense
                                    >
                                    </v-combobox>
                                </v-col>
                                <v-col cols="4">
                                    <v-combobox
                                      v-model="item.if_value"
                                      :items="rangeList"
                                      multiple
                                      outlined
                                      dense
                                    >
                                    </v-combobox>
                                </v-col>
                                <v-col cols="1">
                                    <div class="div-index">
                                        <v-btn small icon @click="removeFourth(i)">
                                            <v-icon>mdi-minus</v-icon>
                                        </v-btn>
                                    </div>
                                </v-col>
                            </v-row>
                            <v-row no-gutters class="row-if">
                                <v-col cols="1"></v-col>
                                <v-col cols="1">
                                    <div class="div-index"><h4>THEN</h4></div>
                                </v-col>
                                <v-col cols="2">
                                    <v-combobox
                                      v-model="item.then_name"
                                      :items="TempName"
                                      @change="changeName(item.then_name)"
                                      outlined
                                      dense
                                    >
                                    </v-combobox>
                                </v-col>
                                <v-col cols="2">
                                    <v-combobox
                                      v-model="item.then_cond"
                                      :items="conditionThenItem"
                                      @change="changeCondition(item.then_cond)"
                                      outlined
                                      dense
                                    >
                                    </v-combobox>
                                </v-col>
                                <v-col cols="4">
                                    <v-combobox
                                      v-model="item.then_value"
                                      :items="rangeList"
                                      multiple
                                      outlined
                                      dense
                                    >
                                    </v-combobox>
                                </v-col>
                                <v-col cols="1">
                                    <div class="div-index">
                                        <v-btn small icon @click="appendFourth(i+1)">
                                            <v-icon>mdi-plus</v-icon>
                                        </v-btn>
                                    </div>
                                </v-col>
                            </v-row>
                        </div>
                    </tr>
                </tbody>
            </template>
          </v-simple-table>

          <v-btn
            text
            color="primary"
            @click="nextStep(1)"
          >
            上一步
          </v-btn>
          <v-btn
            color="green"
            @click="submitThird"
            samll
          >
            重置
          </v-btn>
          <v-btn
            color="primary"
            @click="saveData"
            samll
          >
            保存
          </v-btn>
          <v-btn text color="green">{{ FourthTip }}</v-btn>
        </v-stepper-content>
      </v-stepper-items>
    </v-stepper>
  </div>
</template>

<script>
import {defineComponent} from '@vue/composition-api'
// import Qs from "qs"

export default defineComponent({
    setup() {

    },
    props: {
        updateSheet: {
            type: {Object},
            default: {}
      }
    },
    data () {
        return {
            e1: 1,
            steps: 4,
            scene_name: '',
            step_titles: ['', 'Step:添加因子', 'Step:因子取值', 'Step:子模型设置', 'Step:约束条件'],
            FirstTip: '提交后进入下一步',
            SecondTip: '提交后进入下一步',
            ThirdTip: '1.多组之间，因子不可耦合！2.子模型阶数小于等于子模型因子个数。',
            FourthTip: '1.多组约束条件必须互斥；2.通过别称可添加非条件约束;3.只有IN可多选。',
            orderList: [],
            sheet: {
              'scene_node': '', 
              'scene_name': '',
              'scene_order': 2,
              'FirstItem': [{'name': ''}, {'name': ''}],
              'SecondItem': [], 
              'ThirdItem': [{'model': [], 'order': null}],
              'FourthItem': [{'index': 'Ⅰ', 'if_name': null, 'if_cond': null, 'if_value': null, 'then_name': null, 'then_cond': null, 'then_value': null}]
            },
            params_list: [],
            TempName: [],
            cur_index: 'Ⅰ',
            IndexItem: ['Ⅰ', 'Ⅱ', 'Ⅲ', 'Ⅳ', ' Ⅴ', 'Ⅵ', ''],
            conditionItem: ['=', '>', '<', '>=', '<=', '<>', 'in'],
            conditionThenItem: ['=', '>', '<', '>=', '<=', '<>'],
            conditionItemTwo: ['or', 'and'],
            conditionList: [],
            rangeList: [],
            condition_flag: false
        }
    },

    watch: {
        steps (val) {
            if (this.e1 > val) {
                this.e1 = val
            }
        },
    },
    mounted() {
      this.update_Sheet()
      console.log(this.sheet)
    },
    methods: {
        update_Sheet(){
          console.log('updateSheet .... ')
          console.log(this.updateSheet)
          for(let key in this.updateSheet){
            console.log(key)
            this.sheet[key] = this.updateSheet[key]
          }
          console.log(this.sheet)
        },
        nextStep (n) {
            if (n === this.steps) {
                this.e1 = 1
            } else {
                this.e1 = n + 1
            }
        },
        appendFirst (num) {
            let new_item = {'name': ''}
            this.sheet.FirstItem.splice(num, 0, new_item)
            console.log(this.sheet.FirstItem)
        },
        removeFirst (num) {
            console.log('removeFirst ...')
            this.sheet.FirstItem.splice(num, 1)
            console.log(this.sheet.FirstItem)
        },
        submitFirst(){
            // 阶数不能大于子模型阶数
            // this.sheet.scene_order = this.sheet.FirstItem.length
            let _this = this
            console.log(this.sheet.FirstItem)
            _this.sheet.SecondItem = []
            this.sheet.FirstItem.forEach(function (unit){
                _this.TempName.push(unit.name)
                _this.params_list.push(unit.name)
                _this.$set(unit, 'value', '')
                _this.$set(unit, 'weight', 5)
                _this.sheet.SecondItem.push(unit)
            })
            this.FirstTip = '可以进行下一步添加因子取值了！'
            console.log(this.params_list)
            console.log(this.TempName)
            console.log(this.sheet.SecondItem)
        },
        appendSecond (num, name) {
            let new_item2 = {'name': name, 'value': '', 'weight': 5}
            this.sheet.SecondItem.splice(num, 0, new_item2)
            console.log(this.sheet.SecondItem)
        },
        removeSecond (num) {
            console.log('removeSecond ...')
            this.sheet.SecondItem.splice(num, 1)
            console.log(this.sheet.SecondItem)
        },
        submitSecond(){
          this.TempName = JSON.parse(JSON.stringify(this.params_list))
          this.sheet.ThirdItem = [{'model': [], 'order': null}]
          this.SecondTip = '水平因子添加完成，可以进行下一步，添加子模型。'
        },
        submitThird(){
            console.log(this.params_list)
            console.log('submitThird ...')
            this.TempName = JSON.parse(JSON.stringify(this.params_list))
            this.ThirdTip = '子模型添加完成，可以进行下一步，添加约束条件。'
            this.sheet.FourthItem = [{'index': 'Ⅰ', 'if_name': null, 'if_cond': null, 'if_value': null, 'then_name': null, 'then_cond': null, 'then_value': null}]
            this.cur_index = 'Ⅰ'
            console.log(this.TempName)
        },
        appendThird(num) {
            console.log('appendThird ...')
            let _this = this
            let new_item3 = {'model': [], 'order': null}
            this.sheet.ThirdItem.splice(num, 0, new_item3)
            console.log(this.sheet.ThirdItem)
            // 移除已经选择了的因子名称
            let use_name = this.sheet.ThirdItem[num-1].model
            use_name.forEach(name=>{
                let cur_index = _this.TempName.indexOf(name)
                _this.TempName.splice(cur_index, 1)
            })
            console.log(this.TempName)
        },
        removeThird(num){
            console.log('removeThird ...')
            this.sheet.ThirdItem.splice(num, 1)
            console.log(this.sheet.ThirdItem)
        },
        modelLength(item){
            let lg = item.length
            let res = []
            for(let i=0; i<=lg; i++){
                if(i!==0){
                    res.push(i)
                }
            }
            this.orderList = res
            return res
        },
        appendFourth(num) {
            console.log('appendThird ...')
            // let index_name = this.IndexItem[num]
            let index_no = this.IndexItem.indexOf(this.cur_index)
            let index_name = this.IndexItem[index_no+1]
            this.cur_index = index_name
            let new_item4 = {'index': index_name, 'if_name': null, 'if_cond': null, 'if_value': null, 'then_name': null, 'then_cond': null, 'then_value': null,}
            this.sheet.FourthItem.splice(num, 0, new_item4)
            this.TempName.push(index_name)
            console.log(this.sheet.FourthItem)
        },
        removeFourth(num){
            console.log('removeFourth ...')
            let index_name = this.sheet.FourthItem[num]
            let tmp_index = this.TempName.indexOf(index_name)
            this.TempName.splice(tmp_index, 1)
            this.sheet.FourthItem.splice(num, 1)
            console.log(this.sheet.FourthItem)
        },
        changeName(name){
            console.log('changeName ...')
            let range = []
            if(this.judgeType(name)){
              console.log('changeName 111 ...')
              this.conditionList = JSON.parse(JSON.stringify(this.conditionItemTwo))
              this.sheet.FourthItem.forEach(unit=>{
                range.push(unit.index)
              })
            }else {
              console.log('changeName 222 ...')
              this.conditionList = JSON.parse(JSON.stringify(this.conditionItem))
              this.sheet.SecondItem.forEach(unit=>{
                  if(unit.name===name){
                      range.push(unit.value)
                  }
              })
            }  
            console.log(range)
            this.rangeList = range
            return range
        },
        judgeType(name){
          let flag = false
          this.IndexItem.forEach(unit=>{
            if(unit===name){
              flag = true
            }
          })
          return flag
        },
        saveData(){
          console.log('saveData ...')
          console.log(this.sheet)
          let post_data = {'node': this.sheet.scene_node, 'name': this.sheet.scene_name,'data': JSON.stringify(this.sheet)}
          this.$api.scene.addScene(post_data).then(res=>{
            console.log(res)
            this.FourthTip = '保存成功。'
            this.$emit('updateList')
          })
        }
    },
})
</script>

<style scoped>
.div-index {
    text-align:center;
    margin-top: 10px;
}
.table-head-row {
    background-color: #50fefe;
}
.table-head {
    text-align:center;
    height: 30px;
    margin-top: 12px;
}
.table-body-row {
    text-align:center;
    height: 40px;
    margin-top: 12px;
    border-bottom: 12px;
}
.table-body {
    text-align:center;
    margin-top: 10px;
    border-bottom: 10px;
}
.row-if {
    text-align:center;
    height: 45px;
}
.row-then {
    text-align:center;
    height: 45px;
}
</style>